<style lang="stylus">
bg($img)
  background url('../assets/mine/' + $img + '.png') no-repeat center
  background-size cover
.mine-wrapper
  min-height 100%
  overflow hidden
  .settings
    width 41px
    height 41px
    bg(center_setting)
    position absolute
    right 35px
    top 70px
    &.user
      top 90px
  .mine-wrapper
    bg(mine_bg)
    padding-top 70px
    width 100%
    height 430px
    &.user
      padding-top 90px
    &.guest
      box-sizing border-box
      padding-top 182px
  .user-info
    margin-top 106px
    justify-content center
  .avatar
    width 160px
    height 160px
    border-radius 50%
    bg(loginBg)
  .vip-time
    line-height 58px
    background-color rgba(255, 255, 255, 0.3)
    border-radius 29px
    align-items flex-start
    &::before
      content ''
      display inline-block
      width 51px
      height 39px
      bg(center_vip)
      margin-right 14px
      margin-top 6px
  .notice
    height 60px
    background-color #f0f0f0
  .icon-notice
    width 36px
    height 34px
    bg(center_notice)
  .line-clamp-1
    line-height 60px
  .menu
    width calc((100% - 3px) / 4)
    height 200px
    justify-content center
  .menu-bg
    width 50px
    height 42px
    background-size cover
  .j-c
    justify-content center
  .btn
    line-height 50px
    background-color rgba(255, 255, 255, 0.4)
    border-radius 25px
</style>
<template lang="pug">
.mine-wrapper.center.relative
  .settings(v-if="user.userId", @click="openWindow('setting')", :class="{user: user.userId}")
  .mine-wrapper(v-if="user.userId", :class="{user: user.userId}")
    .title.fz-32.white.bold 我的
    .flex.user-info
      .avatar.bg-white
      .mgl-60.white.bold.txt-left
        .fz-30.pdl-20 UID: {{userId}}
        .mgt-10.vip-time.fz-28.pdh-24.white.flex {{user.expireTime === -1 ? '永久会员': formatTime(user.expireTime * 1000) + '到期'}}
  .mine-wrapper.guest.fz-34(v-else)
    .white.bold HI,等你好久了
    .flex.mgt-60.white.bold.j-c
      .btn.pdh-34(@click="openWindow('login')") 登录
      .btn.pdh-34.mgl-32(@click="openWindow('register')") 注册
  .flex.notice.pdh-20
    .icon-notice
    swipe.mgl-24.flex-1.txt-left(:auto="4000", :show-indicators="false")
      swipe-item(v-for="(item, index) in notices", :key="index")
        .fz-22.gray-99.line-clamp-1 {{item.content}}
  .mgt-58.flex.flex-wrap.bdt
    .menu.flex.column.bdb(v-for="(menu, index) in menus", :key="index", :class="{bdl: index / 4 !== 0}", @click="onClickMenu(index)")
      .menu-bg(:style="{backgroundImage: `url(${getImage(menu.icon)})`}")
      .fz-24.mgt-46 {{ menu.title }}
  tabs(:selected="selectedTab")
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui'
import { CHANNEL } from '../const'
import Tabs from '../components/Tabs.vue'

export default {
  name: 'mine',
  components: {
    Tabs, Swipe, SwipeItem
  },

  data: () => ({
    menus: [],
    notices: [],
    selectedTab: CHANNEL.MINE
  }),

  mounted() {
    this.loadMenus()
    this.getUseInfo()
    this.getAdv()
  },

  methods: {
    loadMenus() {
      this.$get('portal/users', { userId: this.userId }).then(menus => {
        this.menus = menus
      })
    },

    onClickMenu(index) {
      const menu = this.menus[index]
      if (menu.params.indexOf('point-to-vip') !== -1 ||
            menu.params.indexOf('history-list') !== -1) {
        if (this.checkLogin()) {
          this.onItemDispatch(menu)
        }
      } else {
        this.onItemDispatch(menu, 0, false)
      }
    },

    formatTime(val) {
      const date = new Date(val)
      const month = date.getMonth() + 1
      const day = date.getDate()
      return [date.getFullYear(), month < 10 ? `0${month}` : month, day < 10 ? `0${day}` : day].join('-')
    },

    // 获取详情
    getUseInfo() {
      if (!this.userId) {
        return
      }

      this.$get('user/info', {
        userId: this.userId
      }).then(user => {
        this.user = user
        this.saveStore('user', user)
      })
    },

    getAdv() {
      this.$get('advert/get').then(notices => {
        this.notices = notices.concat(notices)
      })
    },

    openWindow(path) {
      if (this.config.env.isApp) {
        this.action(path === 'setting' ? 'openSetting' : path)
      } else {
        this.onLinkPage(`/${path}`)
      }
    }
  }
}
</script>
